<template>
    <div class="allOrder">
        <div class="title">
            <h1>挂号订单</h1>
        </div>
        <div class="search">
            <el-form :inline="true">
                <el-form-item label="就诊人 :">
                    <el-select style="width: 230px;" placeholder="请选择就诊人" clearable filterable
                        @change="getUserOrderInfos" v-model="orderParams.patientId">
                        <el-option v-for="item in visitorList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态 :">
                    <el-select style="width: 230px;margin-right: 15px;" placeholder="请选择订单状态" clearable filterable
                        @change="getUserOrderInfos" v-model="orderParams.orderStatus">
                        <el-option v-for="( item, index ) in orderList" :key="index" :label="item.comment"
                            :value="item.status">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" size="default" @click="getUserOrderInfo">查询</el-button>
                    <el-button type="info" size="default" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table stripe :data="tableData">
                <el-table-column align="center" prop="reserveDate" label="就诊时间"></el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="hosname" label="医院"></el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="depname" label="科室"></el-table-column>
                <el-table-column align="center" prop="title" label="医生职位"></el-table-column>
                <el-table-column align="center" prop="amount" label="医是服务费"></el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="patientName" label="就诊人"></el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="param.orderStatusString"
                    label="订单状态"></el-table-column>
                <el-table-column align="center" label="操作">
                    <template #="{ row, $index }">
                        <el-button type="text" @click="goDetail(row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="page" @current-change="getUserOrderInfo" v-model:current-page="orderParams.pageNo"
                v-model:page-size="orderParams.pageSize" layout="total, prev, pager, next" :total="total">
            </el-pagination>

        </div>
    </div>
</template>

<script setup lang="ts">
import { getOrderListAPI, getUserAPI, getUserOrderInfoAPI } from '@/api/user';
import { OrderListResponseData, orderStatusData, OrderStatusResponseData, visitorArr, VisitorResponseData } from '@/api/user/type';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

let total = ref<number>(0)
let orderParams = reactive<any>({
    pageNo: 1,
    pageSize: 10,
    patientId: '',
    orderStatus: ''
})
let tableData = ref<any>([])
let visitorList = ref<visitorArr>([])
let orderList = ref<orderStatusData>([])

onMounted(() => {
    getUserOrderInfo()
    getVisitorList()
    getOrderList()
})

const getVisitorList = async () => {
    let res: VisitorResponseData = await getUserAPI()
    visitorList.value = res.data
}
const getOrderList = async () => {
    let res: OrderStatusResponseData = await getOrderListAPI()
    orderList.value = res.data
}
const getUserOrderInfo = async () => {
    let { pageNo, pageSize, patientId, orderStatus } = orderParams
    let res: OrderListResponseData = await getUserOrderInfoAPI(pageNo, pageSize, patientId, orderStatus)
    tableData.value = res.data.records
    total.value = res.data.total
}

let $router = useRouter()
const goDetail = (row: any) => {
    $router.push(`/user/order?orderId=${row.id}`)
}
const getUserOrderInfos = () => {
    orderParams.pageNo = 1
    getUserOrderInfo()
}
const reset = () => {
    Object.assign(orderParams, {
        pageNo: 1,
        pageSize: 10,
        patientId: '',
        orderStatus: ''
    })
    getUserOrderInfo()
}
</script>

<style scoped lang="scss">
.allOrder {

    .title {
        h1 {
            font-weight: bold;
        }
    }

    .search {
        margin: 20px 0;
    }

    .table {

        ::v-deep .el-table {
            --el-table-header-bg-color: #E8F2FF
        }

        .page {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }
    }
}
</style>